<html>

<head>
    <title>资源权限列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css"/>
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .logo {
            height: 50px;
            margin: 30px 0px;
            background: rgba(71, 43, 255, 0.3);
            color: #000000;
            text-align: center;
            line-height: 50px;
            overflow: hidden;
            font-size: 150%;
            font-weight: bolder;
        }

        .ant-layout {
            height: 100%
        }

        .ant-layout-has-sider {
            height: 100%
        }

        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        .radio {
            background-position: -144px 0;
        }
    </style>
</head>

<body>
<div id="app"></div>
<script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const {Layout, Menu, Tabs, Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message, Radio, Tree, Checkbox} = antd
    const DirectoryTree = Tree.DirectoryTree;
    const TreeNode = Tree.TreeNode
    const {Header, Content, Sider} = Layout;
    const CheckboxGroup = Checkbox.Group;

    // 业务组件
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.siderCollapsed = this.siderCollapsed.bind(this)
            this.loadSider = this.loadSider.bind(this)
            this.windowResize = this.windowResize.bind(this)
            this.getTreeResource = this.getTreeResource.bind(this)
            this.recursiveMap = this.recursiveMap.bind(this)
            this.createTreeNode = this.createTreeNode.bind(this)
            this.onSelect = this.onSelect.bind(this)
            this.doSave = this.doSave.bind(this)

            this.state = {
                collapsed: false,
                role: [],
                tree: [],
                op: [],
                defaultBox: [],
                roleNo: "",
                resourceId: ""
            }

        }

        onGroupChange(value) {
            this.setState({roleNo: value.target.value})
            this.onOperation(this, this.state.resourceId, value.target.value)
        }

        onBoxChange(checkedValues) {
            this.setState({defaultBox: checkedValues})
        }

        onSelect(keys, info) {
            const self = this
            let resourceId = info.node.key
            this.setState({resourceId: resourceId})
            this.onOperation(this, resourceId, this.state.roleNo)
        }

        onOperation(self, resourceId, roleNo) {
            if (resourceId && roleNo) {
                API.request({
                    baseURL: baseURL,
                    method: "post",
                    dataType: "form",
                    url: "api/s/resource/action/all",
                    data: Qs.stringify({"resourceid": resourceId})
                }).then(function (data) {
                    let op = data.rows
                    if (op && op.length > 0) {
                        self.setState({"op": op})
                    } else {
                        message.warning("该菜单无权限赋值，请选择其他菜单！")
                    }
                });
                if (roleNo && roleNo != "") {
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        dataType: "form",
                        url: "api/s/role/rights/all",
                        data: Qs.stringify({"roleno": roleNo, "resourceid": resourceId})
                    }).then(function (data) {
                        self.setState({
                            defaultBox: data.rows.map((value => {
                                return value.actid
                            }))
                        })
                    });
                }
            }

        }

        loadSider() {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/s/roles",
                data: ""
            }).then(function (data) {
                let role = data.rows
                if (role && role.length > 0) {
                    self.setState({"role": role})
                } else {
                    message.error("无角色信息，无法进行资源权限定义，请创建角色！")
                }
            });
        }

        getTreeResource() {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/resource/all/root"
            }).then(function (data) {
                let tree = data.map(function (node, index) {
                    return {
                        name: node.text,
                        url: node.url || "#",
                        id: node.id,
                        children: node.children.map(function (chindVal) {
                            return self.recursiveMap(chindVal)
                        })
                    }
                });
                self.setState({"tree": tree})
            })
        }

        recursiveMap(node) {
            return {
                name: node.text,
                url: node.url || "#",
                id: node.id,
                parentId: node.parentId,
                children: node.children && node.children.length > 0 ? node.children.map(this.recursiveMap) : []
            }
        }

        createTreeNode(node) {
            if (node.children && node.children.length > 0) {
                return (
                    <TreeNode key={node.id} title={node.name}>
                        {
                            node.children.map((sub, index) => {
                                if (sub.children && sub.children.length > 0) {
                                    return this.createTreeNode(sub)
                                } else {
                                    return <TreeNode key={sub.id} title={sub.name}></TreeNode>
                                }
                            })
                        }
                    </TreeNode>
                )
            } else {
                return <TreeNode key={node.id}>{node.name}</TreeNode>
            }
        }

        doSave() {
            if (!this.state.roleNo) {
                message.error("请选择角色")
                return
            }
            if (!this.state.resourceId) {
                message.error("请选择系统菜单节点")
                return
            }
            let param = {};
            param.roleno = this.state.roleNo;
            param.resourceid = this.state.resourceId;
            param.actIdStr = this.state.defaultBox.join(",");
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "json",
                url: "api/s/role/right/save",
                data: param
            }).then(function (data) {
                if (data.code == '-1') {
                    message.error("保存失败" + data.message)
                } else {
                    message.success("保存成功")
                }
            });
        }

        siderCollapsed(collapsed) {
            this.setState({
                collapsed
            })
        }

        windowResize() {
            let iframeHeight = window.innerHeight - 40 - 16
            this.setState({
                iframeHeight: iframeHeight
            })
        }

        componentDidMount() {
            this.loadSider()
            this.getTreeResource()
            this.windowResize()
            window.addEventListener('resize', this.windowResize);
        }

        componentWillUnmount() {
            window.removeEventListener('resize', this.windowResize);
        }

        render() {
            const trees = this.state.tree.map((node, index) => {
                if (!node.children || node.children.length <= 0) {
                    return (
                        <TreeNode title={node.name} key={node.id}/>
                    )
                } else {
                    return this.createTreeNode(node)
                }
            })
            const roles = this.state.role.map((item, index) => {
                return <Radio style={{width: '100%', margin: '0 0 10 0'}}
                              value={item.roleno}>{item.rolename}</Radio>
            })

            const ops = this.state.op.map((box, index) => {
                return <Checkbox style={{width: '100%', margin: '0 0 10 0'}}
                                 value={box.actid}>{box.descr}</Checkbox>
            })

            return (
                <div>
                    <Layout>
                        <Layout.Sider theme="light" style={{padding: '0 24px', margin: '0 5 0 0'}} width={200}>
                            <div className="logo">角色列表</div>
                            <Radio.Group onChange={this.onGroupChange.bind(this)} active={this.state.roleNo}>
                                {roles}
                            </Radio.Group>
                        </Layout.Sider>
                        <Layout.Sider theme="light" style={{padding: '0 24px', margin: '0 5 0 5'}} width={800}>
                            <div className="logo">系统菜单</div>
                            <Tree onSelect={this.onSelect}>
                                {trees}
                            </Tree>
                        </Layout.Sider>
                        <Layout.Content theme="light"
                                        style={{background: '#FFFFFF', padding: '0 24px', margin: '0 0 0 5'}}
                                        width={200}>
                            <div className="logo">资源操作</div>
                            <CheckboxGroup value={this.state.defaultBox} onChange={this.onBoxChange.bind(this)}>
                                {ops}
                            </CheckboxGroup>
                            <div align="center">
                                <Button onClick={this.doSave}>保存</Button>
                            </div>
                        </Layout.Content>
                    </Layout>
                </div>
            )
        }
    }

    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App/>
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
</script>
</body>
</html>
